<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        *{
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>员工查询</h1>
    <lable>请输入员工账号</lable>
    <input type="text" id="keyword">
    <button id="search" name="search" type="submit">查询</button>
    <br>
    <p id="searchResult"></p>
    <hr>
    <h1>添加员工</h1>
    <lable>请输入员工姓名</lable>
    <input type="text" id="staffName">
    <br>
    <lable>请输入员工编号</lable>
    <input type="text" id="staffNumber">
    <br>
    <lable>请输入员工性别</lable>
    <select name="staffSex" id="staffSex">
        <option value="男">男</option>
        <option value="女">女</option>
        <option value="不确定">不确定</option>
    </select>
    <br>
    <lable>请输入员工职位</lable>
    <input type="text" id="staffJob">
    <br>
    <button id="save" name="save" type="submit">保存</button>
    <p id="createResult"></p>

    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
    <script>
        $(document).ready(function(){
            $("#search").click(function(){
                $.ajax({
                    type: "GET",
                    url: "jQueryJSONServer.php?number=" + $("#keyword").val(),
                    dataType: "json",
                    success: function(data) {
                        if (data.success) {
                            $("#searchResult").html(data.message);
                        } else {
                            $("#searchResult").html("出现错误：" + data.message);
                        }
                    },
                    error: function(jqXHR){
                        alert("发生错误：" + jqXHR.status);
                    },
                });
            });

            $("#save").click(function(){
                $.ajax({
                    type: "POST",
                    url: "jQueryJSONServer.php",
                    data: {
                        name: $("#staffName").val(),
                        number: $("#staffNumber").val(),
                        sex: $("#staffSex").val(),
                        job: $("#staffJob").val()
                    },
                    dataType: "json",
                    success: function(data){
                        if (data.success) {
                            $("#createResult").html(data.message);
                        } else {
                            $("#createResult").html("出现错误：" + data.message);
                        }
                    },
                    error: function(jqXHR){
                        alert("发生错误：" + jqXHR.status);
                    },
                });
            });
        });
    </script>
</body>
</html>